<template>
    <div class="sys-li-box" :class="{small : size == 'small'}">
        <p class="name">{{title}}</p>
        <div class="val"><a :href="link" :style="{color: color}">{{content}}</a></div>
    </div>
</template>

<script>
export default {
    name: 'xx-tag',
    props: {
        title: {
            type: String,
            default: 'Tag标签'
        },
        content: {
            type: [String, Number],
            default: ''
        },
        link: {
            type: String,
            default: 'javascript:;'
        },
        size: {
            /**
             * 尺寸，可选small或normal
             */
            type: String,
            default: 'normal'
        },
        color: {
            type: String,
            default: '#333'
        }
    }
}
</script>
<style scoped>

.sys-li-box {
    text-align: center;
    height: 100px;
    background-color: #f9f9f9;
    border: #f0f0f0 1px solid;
    width: 230px;
    margin:10px;
}
.sys-li-box.small {
    height: 80px;
    width: 180px;
}
.sys-li-box .name {
    line-height: 40px;
    margin: 8px;
}
.sys-li-box.small .name{
    margin: 0 0 5px 0;
}
a {
    color: #333;
    border: 0;
    text-decoration: none;
    font-size: 26px;
    font-family: arial;
}
.sys-li-box.small a{
    font-size: 20px;
}
</style>
